<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Ankang
 * @Date: 2021-06-04 22:42:15
 * @LastEditors: Ankang
 * @LastEditTime: 2021-06-09 22:15:40
-->
<template>
    <div class="container">
        <div v-if="isLoading" class="loading">
            <van-skeleton v-for="v in 4" :key="'key' + v" title :row="3" />
        </div>
        <div class="con"  v-for="item,index in list" @click="divClick(item.article_id)">
            <div class="comm_pic">
                <img :src="'https://images.weserv.nl/?url='+item.focus_pic_url" alt="">
                <span class="top">TOP {{index+1}}</span>
            </div>
            <div class="comm_title">
                <h1>{{item.title}}</h1>
                <div>
                    <img :src="'https://images.weserv.nl/?url='+item.avatar" alt="">
                    <span class="display_name">{{item.display_name}}</span>
                    <i class="iconfont">&#xe635;</i>
                    <span class="ll">{{item.comment_count}}</span>
                    <i class="iconfont">&#xe657;</i>
                    <span class="sc">{{item.collection_count}}</span>
                </div>
            </div>
        </div>
    <MoreButton></MoreButton>
  </div>
</template>


<script>
import Vue from 'vue';
import axios from 'axios';
import { Skeleton } from 'vant';
import MoreButton from '../../../components/MoreButton'
Vue.use(Skeleton);
export default{
    components: {
        MoreButton
    },
    data() {
        return {
            list:[],
            isLoading: true,
        }
    },
    methods:{
        divClick(id){
            // window.location.href = url
            this.$router.push('/articledetail')
        }
    },
    async mounted(){
        let result = await axios.get('/wxapp/zdmapp/homepage_body/index')
        // console.log(result)
        this.list = result.data.data.shequ.slice(0,3)
        // console.log(this.list)
        this.isLoading = false
    }
}
</script>


<style lang="stylus"  scoped>
@import '../../../assets/ellipsis.styl'
.container
    margin .17rem 0
    height 100%
    display flex
    border-radius .05rem
    .con
        background #fff
        padding-bottom .2rem
        display flex
        .comm_pic
            position relative
            img
                border-radius .05rem
                width 1.2rem
                height 1rem
            .top
                font-size 12px
                position absolute
                display inline-block
                width 40px
                height 20px
                border-radius 0 0 .05rem 0
                color #fff
                text-align center
                font-weight bold
                background red
                left 0px
                top 0px
        .comm_title
            position relative
            display flex;
            flex-direction column
            padding-left .12rem
            background #fff
            h1
                font-size 13px
                line-height 13px
                font-weight normal
                height 26px
                ellipsis(100%,2)
            div
                position absolute
                bottom 0
                width 100%
                .display_name
                    display inline-block
                    width .5rem
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    line-height 12px
                    vertical-align middle
                img
                    width .2rem
                    height .2rem
                    border-radius .2rem
                span
                    font-size 12px
</style>